<template>
  <div>
    <div id="_div">
      <div id="profilePhoto">
        <el-avatar :size="150" :src="profilePhoto"></el-avatar>
      </div>
    </div>
    <div id="_body">
      <div>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1" @click="myCollect">我的收藏</el-menu-item>
          <el-menu-item index="2" @click="myTest">我的实验</el-menu-item>
          <el-menu-item index="3" @click="myFootprint">足迹</el-menu-item>
          <el-menu-item index="4" @click="isEditChange(true)">设置</el-menu-item>
        </el-menu>
        <div class="line"></div>
      </div>
      <br>
      <keep-alive>
        <show-test-list ref="showPersonalTests" v-if="!isEdit"></show-test-list>
        <user-info ref="showUserInfo" v-if="isEdit"></user-info>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import MainBody from "@/components/mainBody";
import ShowTestList from "@/components/ShowTestList";
import UserInfo from "@/views/personalCenter/UserInfo";

export default {
  components: {UserInfo, ShowTestList},
  data() {
    return {
      isCollapse: true,
      isEdit: false,
      activeIndex: '1',
      activeIndex2: '1',
      profilePhoto: '',

    };
  },
  methods: {
    handleOpen(key, keyPath) {
    },
    handleClose(key, keyPath) {
    },
    handleSelect(key, keyPath) {
    },
    myCollect() {
      this.isEditChange()
      this.$refs.showPersonalTests.myCollect();
    },
    myTest() {
      this.isEditChange()
      this.$refs.showPersonalTests.myTest();
    },
    myFootprint() {
      this.isEditChange()
      this.$refs.showPersonalTests.myFootprint();
    },
    isEditChange(boo = false) {
      this.isEdit = boo;
    },
    loginUserInfo() {
      let token = sessionStorage.getItem("token");
      this.$axios.get("/user/getLoginUser", {params: {token: token}})
          .then(response => {
            let responseData = response.data;
            this.profilePhoto = responseData.data.profilePhoto;
          })
    },
  },
  activated() {
    this.myCollect();
  },
  created() {
    this.loginUserInfo();
  }
}
</script>

<style>
#_div {
  height: 200px;
  background-image: url("http://192.168.201.41:8004/imgs/test_010.png");
}

#profilePhoto {
  position: relative;
  top: 30px;
  left: 50px;
}

#_body {
  width: 1300px;
  position: relative;
  left: 50px;
}
</style>